<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise-fetch</title>
</head>
<body>
<span>Promise-fetch函数测试，打开浏览器控制台查看结果。</span>
</body>
<script>
    console.log('开始发送请求...')
    //获取远程数据
    const fetchPromise = fetch(
        "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
    );
    console.log('Promise异步对象：', fetchPromise);
    //获取响应结果使用 .then
    fetchPromise.then(response => {
        //获取异步回调的结果
        console.log(`已收到响应：`, response)
        //获取响应数据
        let json = response.json()
        json.then(jsonRes => {
            console.log("响应数据：", jsonRes)
        })
    }).catch(err => {
        //获取异常
        console.error("请求异常：", err)
    });
    console.log("已发送请求……")

    //总结：Promise 是异步对象，不会堵塞，直接跳过执行。要想获取结果使用 Promise对象.then()。
</script>
</html>